<template>
  <div class="login-box">
    <p class="title">登录</p>
    <el-form :model="loginMsg" :rules="rules" ref="loginBox" class="login-form">
      <el-form-item prop="username" class="login-item">
        <el-input 
          class="login-input"
          v-model="loginMsg.username" 
          placeholder="请输入用户名"
        ></el-input>
      </el-form-item>
      <el-form-item prop="password" class="login-item">
        <el-input 
          class="login-input"
          v-model="loginMsg.password" 
          placeholder="请输入密码"
        ></el-input>
      </el-form-item>
        
        <el-button @click="loginClick" size="small" type="primary login-btn">登录</el-button>
        <router-link to="/register" tag="span" class="go-register">注册账号 >></router-link>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'login',
  data(){
    return{
      loginMsg:{
        username:'',
        password:''
      },
      rules:{
        username: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
          ],
        password:[
          { required: true, message: '请输入不能为空', trigger: 'change' }
        ],
      }
    }
  },
  methods:{
    //登录
    loginClick(){
      this.$refs.loginBox.validate((valid)=>{
        if(valid){
          console.log(this.loginMsg,111)
          this.$message({
            message: '欢迎你，登录成功',
            type: 'success'
          });
        }else{
          this.$message({
            message: '好像有点问题哦',
            type: 'warning'
          });
        }
      })
    }
  }
}
</script>

<style lang="scss">
.login-box{
  width:30%;
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-80%);
  .title{
    font-size: 2rem;
    margin-bottom:.8rem;
  }
  .login-form{
    .login-item{
      .login-input{
        // margin-bottom:.4rem;
      }
    }
    .login-btn{
      margin-right: 1rem;
      font-size: 1.2rem;
    }
    .go-register{
      color:#007bff;
      cursor: pointer;
    }
    & .go-register:hover{
      color:#034d9c;
      text-decoration: underline;
    }
  }
}
</style>